/**
	config : {	
		data : [{id , name , chils:[]}], 
		container , 
		levelNum , 
		listWidth , 
		listHeight,
		pathContainer
	}
*/
	function ConcatenateList(config){
		this.initialize(config);
		
		var rootList = this._createList(this.data , ConcatenateList.defaults.idPrefix + "0");
		$("#" + rootList.id).replaceWith(rootList);
		this._bindListEvent(rootList);
		$(rootList).change();
		this.initialValue();
		this.currentValue = this.getValue();
	}
	
	ConcatenateList.prototype = {
	
		initialize : function(config){
			this.levelNum = config.levelNum || ConcatenateList.defaults.levelNum;
			this.listWidth = config.listWidth || ConcatenateList.defaults.listWidth;
			this.listHeight = config.listHeight || ConcatenateList.defaults.listHeight;
			this.isMultiple = config.isMultiple == undefined ? ConcatenateList.defaults.isMultiple :  false;
			this.pathContainer = config.pathContainer || null;
			this.data = this.setComponentData(config.data);
			this.initValue = config.initValue || null; //initValue : "2-3"
			this.valueSplit = config.valueSplit || "-";
			this.container = this.setComponentContainer(config.container);
			this.initialComponent();
		},
		
		initialComponent : function(){
			var fragment = document.createDocumentFragment();
			for(var i = 0 ; i < this.levelNum ; i ++){
				var select = this._createList( [] , ConcatenateList.defaults.idPrefix + i);
				fragment.appendChild(select);
			}
			$(this.container).append(fragment);
		},
		
		initialValue : function(){
			if(this.initValue){
				this.setValue(this.initValue , "-");
			}
			return true;
		},
		
		setComponentData : function(data){
			if(typeof data == "string"){
				this.data = eval(data);
			}else if( typeof data == "object"){
				this.data = data;
			}else{
				throw new Error("data type is  unavailable!");
			}
			return this.data;
		},
		
		setComponentContainer : function(container){
			this.container = $(container).get(0); // depends on jquery
			if(!this.container){
				throw new Error("container is unavailable!");
			}else{
				return this.container;
			}
		},
		
	/*	getValue : function(){
			for(var i = (this.levelNum - 1) ; i >= 0 ; i--){
				var value = $("#" + ConcatenateList.defaults.idPrefix + i).val();
				if(value){
					return value;
				}
			}
		},
		*/
		getValue : function(){
			var value = [];
			for(var i = 0 ; i < this.levelNum ; i++){
				var list = $("#" + ConcatenateList.defaults.idPrefix + i).get(0);
				if(list.selectedIndex > -1){
					var	pathId = list.options[list.selectedIndex].value;
					if(pathId){
						value.push(pathId);
					}else{
						break;
					}
				}
			}
			value = value.join(this.valueSplit);
			return value;
		},
		
		setValue : function(values , split){
			split = split || "-";
			values = values.split(split);
			selects = this.container.getElementsByTagName("select");
			for(var i = 0 ; i < values.length ; i++){
				$(selects[i]).value(values[i]);
			}
			return this;
		},
		

		onChange : function(callback){
			this._onselectedChange = callback; //注入事件
			return true;
		},
		
		getChoicePath : function(){
			var path = [];
			for(var i = 0 ; i < this.levelNum ; i++){
				var list = $("#" + ConcatenateList.defaults.idPrefix + i).get(0);
				if(list.selectedIndex > -1){
					var	pathName = list.options[list.selectedIndex].text;
					if(pathName){
						path.push(pathName);
					}else{
						break;
					}
				}
			}
			path = path.join(ConcatenateList.defaults.listPathSplit);
			return path;
		},
		
	 	_queryChildrenData : function(index , data){
	 		var data = this.data || [];
	 		for(var i = 0 , iLen = data.length ; i < iLen ; i++){
	 			if(data[i].id == index){
	 				return data[i].chils || [];
	 			}else{
	 				 arguments.callee(index , data[i].chils);
	 			}
	 		}
	 		return [];
	 	},
		
		_createList : function(data , id){
		 	var select = document.createElement("select"),
		 		data = data || [],
		 		id = id ;
		 		
			$(select).attr({
				"multiple" : this.isMultiple , 
				"id" : id
			}).css({
				width : this.listWidth , 
				height: this.listHeight
			});
		 	for(var i = 0 , iLen = data.length ; i < iLen ; i++){
		 		var option = document.createElement("option");
		 			option.text = data[i].name;
		 			option.value = data[i].id;
		 			if( i == 0){
		 				option.selected = "true"
		 			}
					if(window.attachEvent){
						select.add(option);
					}
					else{
						select.add(option , null);
					}
		 	}
		 	
		 	return select;
		},
		
		_bindListEvent : function(selectObj){
			var _this = this;
	 		$(selectObj).change(function(){
	 			var currentIndex = $(this).val(),
	 				childData = _this._queryChildrenData(currentIndex , _this.data);
	
	 			var id = ConcatenateList.defaults.idPrefix + (1 + (this.id.substring(this.id.length -1) - 0)),
	 				select = _this._createList(childData , id);
	 			
	 			_this._bindListEvent(select);
	 			$("#" + select.id).replaceWith(select);
	 			if(_this.pathContainer){
	 				$(_this.pathContainer).html(_this.getChoicePath());
	 			}
	 			if(_this._onselectedChange){
	 				_this._onselectedChange(_this.getValue());
	 			}
	 		});
 		}
	}
	
	ConcatenateList.defaults = {
		idPrefix : "concatenateList",
		levelNum : 4,
		isMultiple : true,
		listWidth : "192px",
		listHeight : "20px",
		listPathSplit : ">>"
	}